<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Market - 智能市场</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            min-width: 100vw;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-x: hidden;
        }

        .container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            padding: 40px;
            width: 100%;
            max-width: 400px;
            margin: 20px;
            position: relative;
            overflow: hidden;
        }

        .container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
            background-size: 400% 400%;
            animation: gradient 3s ease infinite;
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .logo {
            text-align: center;
            margin-bottom: 30px;
        }

        .logo h1 {
            color: #333;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .logo p {
            color: #666;
            font-size: 1rem;
            font-weight: 300;
        }

        .form-group {
            margin-bottom: 25px;
            position: relative;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
            font-size: 0.9rem;
        }

        .form-group input {
            width: 100%;
            padding: 15px 20px;
            border: 2px solid #e1e5e9;
            border-radius: 12px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }

        .form-group input:focus {
            outline: none;
            border-color: #667eea;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            transform: translateY(-2px);
        }   

        .btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }

        .loading {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid #ffffff;
            border-top: 2px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .message {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            font-weight: 500;
            display: none;
        }

        .message.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .message.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .links {
            text-align: center;
            margin-top: 25px;
        }

        .links a {
            color: #667eea;
            text-decoration: none;
            font-weight: 500;
            margin: 0 10px;
            transition: color 0.3s ease;
        }

        .links a:hover {
            color: #764ba2;
        }

        .features {
            margin-top: 30px;
            text-align: center;
        }

        .features h3 {
            color: #333;
            margin-bottom: 15px;
            font-size: 1.2rem;
        }

        .feature-list {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .feature-item {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 10px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            margin: 5px;
            font-weight: 500;
        }

        @media (max-width: 480px) {
            .container {
                margin: 10px;
                padding: 30px 25px;
            }
            
            .logo h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo">
            <h1>AI Market</h1>
            <p>智能市场 - 连接未来</p>
        </div>

        <form id="loginForm">
            <div class="form-group">
                <label for="userAccount">用户账号</label>
                <input type="text" id="userAccount" name="userAccount" placeholder="请输入用户账号" required>
            </div>

            <div class="form-group">
                <label for="userPassword">密码</label>
                <input type="password" id="userPassword" name="userPassword" placeholder="请输入密码" required>
            </div>

            <button type="submit" class="btn" id="loginBtn">
                <span class="loading" id="loading"></span>
                <span id="btnText">登录 / 注册</span>
            </button>
        </form>

        <button type="button" class="btn" id="checkLoginBtn" style="margin-top: 10px; background: #28a745;">
            检查登录状态
        </button>

        <button type="button" class="btn" id="createAppBtn" style="margin-top: 10px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
            <span class="loading" id="createAppLoading"></span>
            <span id="createAppBtnText">创建测试App</span>
        </button>

        <div class="message" id="message"></div>

        <div class="links">
            <a href="http://localhost:8081/api/doc.html" target="_blank">API文档</a>
            <a href="test.html">功能测试</a>
        </div>

        <div class="features">
            <h3>平台特色</h3>
            <div class="feature-list">
                <div class="feature-item">AI驱动</div>
                <div class="feature-item">智能推荐</div>
                <div class="feature-item">安全可靠</div>
                <div class="feature-item">高效便捷</div>
            </div>
        </div>
    </div>

    <script>
        const loginForm = document.getElementById('loginForm');
        const loginBtn = document.getElementById('loginBtn');
        const checkLoginBtn = document.getElementById('checkLoginBtn');
        const createAppBtn = document.getElementById('createAppBtn');
        const loading = document.getElementById('loading');
        const createAppLoading = document.getElementById('createAppLoading');
        const btnText = document.getElementById('btnText');
        const createAppBtnText = document.getElementById('createAppBtnText');
        const message = document.getElementById('message');

        loginForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const userAccount = document.getElementById('userAccount').value.trim();
            const userPassword = document.getElementById('userPassword').value.trim();

            if (!userAccount || !userPassword) {
                showMessage('请填写完整信息', 'error');
                return;
            }

            setLoading(true);

            try {
                const response = await fetch('http://localhost:8081/api/user/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                    },
                    credentials: 'include', // 携带Cookie
                    body: JSON.stringify({
                        userAccount: userAccount,
                        userPassword: userPassword
                    })
                });

                const result = await response.json();

                if (response.ok && result.code === 0) {
                    showMessage(`登录成功！用户ID: ${result.data}`, 'success');
                    // 移除自动跳转，让用户手动选择操作
                } else {
                    showMessage(result.message || '登录失败，请检查账号密码', 'error');
                }
            } catch (error) {
                console.error('登录错误:', error);
                showMessage('网络错误，请稍后重试', 'error');
            } finally {
                setLoading(false);
            }
        });

        // 检查登录状态
        checkLoginBtn.addEventListener('click', async () => {
            try {
                const response = await fetch('http://localhost:8081/api/user/islogin', {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                    },
                    credentials: 'include' // 包含cookies
                });

                if (response.ok) {
                    const result = await response.json();
                    if (result.code === 0) {
                        showMessage(`当前登录用户ID: ${result.data}`, 'success');
                    } else {
                        showMessage(result.message || '未登录', 'error');
                    }
                } else {
                    showMessage('检查登录状态失败', 'error');
                }
            } catch (error) {
                console.error('检查登录状态错误:', error);
                showMessage('网络错误，请检查后端服务', 'error');
            }
        });

        // 创建App
        createAppBtn.addEventListener('click', async () => {
            setCreateAppLoading(true);
            
            // 手动获取satoken Cookie
            const satoken = getCookie('satoken');
            if (!satoken) {
                showMessage('请先登录后再创建App', 'error');
                setCreateAppLoading(false);
                return;
            }
            
            // 默认参数
            const appData = {
                appName: "测试应用" + Date.now(),
                cover: "https://example.com/default-cover.jpg",
                systemPrompt: "你是一个智能助手，请帮助用户解决问题。",
                type: 1,
                description: "这是一个测试应用，用于验证App创建功能。",
                fileGenType: "md",
                priority: 1
            };

            try {
                const response = await fetch('http://localhost:8081/api/app/create', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'Cookie': `satoken=${satoken}`, // 设置Cookie请求头
                    },
                    credentials: 'include', // 携带Cookie
                    body: JSON.stringify(appData)
                });

                const result = await response.json();

                if (response.ok && result.code === 0) {
                    showMessage(`App创建成功！App ID: ${result.data}`, 'success');
                } else {
                    showMessage(result.message || 'App创建失败', 'error');
                }
            } catch (error) {
                console.error('创建App错误:', error);
                showMessage('网络错误，请检查后端服务', 'error');
            } finally {
                setCreateAppLoading(false);
            }
        });

        function setLoading(isLoading) {
            loginBtn.disabled = isLoading;
            loading.style.display = isLoading ? 'inline-block' : 'none';
            btnText.textContent = isLoading ? '处理中...' : '登录 / 注册';
        }

        function setCreateAppLoading(isLoading) {
            createAppBtn.disabled = isLoading;
            createAppLoading.style.display = isLoading ? 'inline-block' : 'none';
            createAppBtnText.textContent = isLoading ? '创建中...' : '创建测试App';
        }

        // 获取Cookie的辅助函数
        function getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(';').shift();
            return null;
        }

        function showMessage(text, type) {
            message.textContent = text;
            message.className = `message ${type}`;
            message.style.display = 'block';
            
            setTimeout(() => {
                message.style.display = 'none';
            }, 5000);
        }

        // 添加输入框动画效果
        document.querySelectorAll('input').forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.style.transform = 'scale(1.02)';
            });
            
            input.addEventListener('blur', function() {
                this.parentElement.style.transform = 'scale(1)';
            });
        });
    </script>
</body>
</html>